import { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import './index.css'

function Index() {
    const [city, setCity] = useState('')

    useEffect(() => {
        window._AMapSecurityConfig = {
            securityJsCode: "2c5bdaf7f3b2df74ca6ca629e620ae10",
        };
        AMapLoader.load({
            key: "d64f5e8da2073a4030ac01811788312d", // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
        })
            .then((AMap) => {
                AMap.plugin('AMap.CitySearch', function () {
                    var citySearch = new AMap.CitySearch()
                    citySearch.getLocalCity(function (status, result) {
                        if (status === 'complete' && result.info === 'OK') {
                            // 查询成功，result即为当前所在城市信息
                            setCity(result.city)
                        }
                    })
                })
                const map = new AMap.Map("container", {
                    // 设置地图容器id
                    viewMode: "3D", // 是否为3D地图模式
                    zoom: 11, // 初始化地图级别
                    // center: [116.397428, 39.90923], // 初始化地图中心点位置
                });

                new AMap.Marker({
                    map,
                    position: new AMap.LngLat(116.404915,39.903305),
                    title: "北京",
                    lable: {
                        content: `<div className='map_textBox'>到这里去</div>`,
                        offset: new AMap.Pixel(-50, -10)
                    }
                });
            })
            .catch((e) => {
                console.log(e);
            });
    }, []);
    return (
        <div className="box">
            <div
                id="container"
                className="container"
                style={{ height: "300px" }}
            > 
            </div>
            <div className="mapapi" >当前位置:{city}</div>
        </div>
    );
}

export default Index
